/*
 * @Author: xiaosihan 
 * @Date: 2021-04-24 22:35:27 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-08-02 00:03:02
 */

import ReactMixinComponent from "@ReactMixinComponent";
import React from "react";
import { ClipPlane, InstancedMesh, InstancedMeshItem } from "xsh-react-three";
import MyController from "../MyController/MyController";
import taidengJPG from "./taideng.jpg";
import taidengOBJ from "./taideng.obj";

interface Props { }

interface State {
    select?: number
}

export default class InstancedMeshDemo extends ReactMixinComponent<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    state: State = {
        select: undefined
    };

    render() {

        const { select } = this.state;

        return (
            <>
                {/* 控制器和相机 */}
                <MyController />

                <ClipPlane
                    position={{ x: 0, y: 0, z: 0 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    size={5}
                />

                <ClipPlane
                    position={{ x: 0, y: 0, z: 0 }}
                    rotation={{ x: 0, y: Math.PI / 2, z: 0 }}
                    size={5}
                />

                <InstancedMesh

                    position={{ x: 0, y: 0, z: 0 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    scale={{ x: 1, y: 1, z: 1 }}
                    lookAt={undefined}
                    geometry={taidengOBJ}
                    map={taidengJPG}
                    material="MeshLambertMaterial"
                    wireframe={false}
                    castShadow={true}
                    opacity={1}
                    clipIntersection={true}

                    // 开启辉光
                    glow_enable={false}
                    glow_visibleColor="#04fa12" //------可见区域辉光颜色
                    glow_hiddenColor="#ff0000" //-------不可见区域辉光颜色
                    glow_depthTest={true} //------------深度测试 = false 时 不进行遮挡计算
                    glow_opacity={0.8} //---------------辉光透明度
                    glow_fill={false} //------------------辉光填充整个模型区域
                    glow_blurWidth={4} //----------------辉光厚度
                    glow_pulsePeriod={1} //--------------辉光闪烁间隔时间_单位秒
                >

                    {
                        Array.from({ length: 100 }).map((item, index) => {

                            let scale = select === index ? 0.05 : 0.03;

                            return (
                                <InstancedMeshItem
                                    key={index}
                                    position={{ x: (index % 10) - 4.5, y: 0, z: Math.floor(index / 10) - 4.5 }}
                                    rotation={{ x: 0, y: 0, z: 0 }}
                                    scale={{ x: scale, y: scale, z: scale }}
                                    color={"#fff"}
                                    cursor="pointer"
                                    onClick={() => {
                                        this.setState({
                                            select: (select === index) ? undefined : index
                                        })
                                    }}

                                    // 开启辉光
                                    glow_enable={select === index}
                                    glow_visibleColor="#04fa12" //------可见区域辉光颜色
                                    glow_hiddenColor="#ff0000" //-------不可见区域辉光颜色
                                    glow_depthTest={false} //------------深度测试 = false 时 不进行遮挡计算
                                    glow_opacity={0.8} //---------------辉光透明度
                                    glow_fill={false} //------------------辉光填充整个模型区域
                                    glow_blurWidth={4} //----------------辉光厚度
                                    glow_pulsePeriod={1} //--------------辉光闪烁间隔时间_单位秒
                                />
                            );
                        })
                    }


                </InstancedMesh>
            </>
        )
    }
}